<u-picker :show="isAddress" keyName="name" ref="uPicker" :columns="addressColumns" @confirm="confirm"
@cancel="isAddress=false" closeOnClickOverlay @close="isAddress=false" @change="changeHandler"></u-picker>
// data
form: {
    address_id: 0,
    consignee: '',
    address: '',
    province: null, //身份
    city: null, //城市
    district: null, //区
    is_default: 0,
    mobile:null
},
address_name: '',
province_list: [],
city_list: [],
district_list: [],
addressColumns: [],
columnData: [],
columnData2: [],
isAddress: false,


async onLoad(option) {
    try {
        if(option.info){
            let e=JSON.parse(option.info)
            this.form.address=e.address
            this.form.consignee=e.consignee
            this.form.is_default=e.is_default
            this.form.province=e.province_id
            this.form.city=e.city_id
            this.form.mobile=e.mobile
            this.form.district=e.district_id
            this.form.address_id=e.address_id
            this.address_name=`${e.province} ${e.city} ${e.district}`
        }
        
            this.province_list = await this.getAddress()
            this.addressColumns.push(this.province_list)
            this.city_list = await this.getAddress(this.province_list[0].id)
            this.columnData.push(this.city_list)
            this.$refs.uPicker.setColumnValues(1, this.columnData[0])
            this.district_list = await this.getAddress(this.city_list[0].id)
            this.columnData2.push(this.district_list)
            this.$refs.uPicker.setColumnValues(2, this.columnData2[0])
        
        
        
    } catch (e) {
        //TODO handle the exception
    }

}

// methods
async getAddress(region_id) {
    try {
        const res = await userApi.getUserRegionList({
            region_id
        })
        return res.result
    } catch (e) {
        //TODO handle the exception
    }
}
async changeHandler(e) {
    const {
        columnIndex,
        value,
        values, // values为当前变化列的数组内容
        index,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker
    } = e
    console.log(e);
    // 当第一列值发生变化时，变化第二列(后一列)对应的选项
    if (columnIndex === 0) {
        // picker为选择器this实例，变化第二列对应的选项
        const data1 = await this.getAddress(value[0].id)
        this.columnData.splice(0, 1, data1)
        picker.setColumnValues(1, this.columnData[0])
        const data2 = await this.getAddress(data1[0].id)
        this.columnData2.splice(0, 1, data2)
        picker.setColumnValues(2, this.columnData2[0])
        return
    }
    if (columnIndex === 1) {
        const data = await this.getAddress(value[1].id)
        this.columnData2.splice(0, 1, data)
        picker.setColumnValues(2, this.columnData2[0])
    }
}
// 回调参数为包含columnIndex、value、values
confirm(e) {
    this.form.province = e.value[0].id
    this.form.city = e.value[1].id
    this.form.district = e.value[2].id
    this.address_name = `${e.value[0].name} ${e.value[1].name} ${e.value[2].name}`
    this.isAddress = false
}